{% extends base.html %}

{% block head %}
    <style>
    	table {
    		width: 100%;
    	}
    	tr td {
    		border: none;
    	}
    	input, button {
  		  width: 100%;
  		  min-width: 200px;
        padding-top: 12px;
        padding-bottom: 12px;
        border-radius: 0px;
        box-sizing: border-box;
     	}
     	input[type=submit], button {
        padding: 12px 24px;
     		border-radius: 0px;
     		background-color: lightblue;
     	}
    	input[type=submit]:hover, button:hover {
    		background-color: #27A9E3;
        border-radius: 0px;
    	}
      .input-header {
        padding-top: 3px;
        size: 14px;
      }
    </style>
{% end %}

{% block body %}
  <div style="width:30%; min-width:200px; padding-top:15%; margin:0 auto;">
		<form id="loginForm" name="loginForm" method="POST">
			<input type="text" name="username" value="{{username}}" placeholder="Account"/>
			<input type="password" name="password" value="{{password}}" placeholder="Password"/>
      <input type="text" name="test" value="Test" class="hide">
			<button type="submit" value="Login" id="loginBtn" style="margin-top:20px;">Login</button>
      <label style="width:100%; color:red">{{error}}</label>
		</form>
	</div>
{% end %}